{layout name="layout" /}

<style>
    /* 编辑器高度设置 */
    .ck-editor__editable_inline {
        min-height: 400px;
    }
</style>

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    <a href="{:url('admin/index/index')}"> 首页</a>
    <span class="c-gray en">&gt;</span>
    <a href="{:url('article/index')}">文章管理</a>
    <span class="c-gray en">&gt;</span>
    <a href="{:url('article/index', ['cid'=>$category_info.id])}">{$category_info.name}</a>
    <span class="c-gray en">&gt;</span>
    <a href="javascprit:;">{$data.id ? '修改' : '新增'}</a>
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
        href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

<div class="Hui-article">
    <article class="cl pd-20">
        <form action="{:url('article/save')}" method="post" class="form form-horizontal"
            id="form-admin-article">
            <input type="hidden" name="id" id="id" value="{$data.id}">
            <input type="hidden" name="cid" id="cid" value="{$cid}">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    <span class="c-red">*</span>标题:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <input type="text" class="input-text" value="{$data.title}" placeholder="请填写标题" id="title"
                        name="title">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    作者: </label>
                <div class="formControls col-xs-4 col-sm-2">
                    <input type="text" class="input-text" value="{$data.writer}" placeholder="作者" id="writer"
                        name="writer">
                </div>
                <label class="form-label col-xs-4 col-sm-2">
                    信息来源:</label>
                <div class="formControls col-xs-4 col-sm-2">
                    <input type="text" class="input-text" value="{$data.source}" placeholder="信息来源" id="source"
                        name="source">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    标题图：</label>
                <div class="formControls col-xs-6 col-sm-4">
                    <div style="width: 200px;height: 200px;">
                        <a href="javascript:void(0);" onclick="uploadPicture()">
                            <img id="view-img"
                                src="{$data.title_pic ? $data.title_pic : '/static/admin/images/upload_picture.png'}"
                                alt="标题图" title="{$data.title_pic ? '更换' : '添加'}标题图"
                                style="max-width: 200px;max-height: 200px;">
                        </a>
                    </div>
                    <input type="text" class="input-text" value="{$data.title_pic}" name="title_pic" id="title_pic"
                        style="display: none;">
                </div>
                <label class="form-label col-xs-2 col-sm-2">
                    <a class="btn btn-success radius" href="javascript:void(0);"
                        onclick="uploadPicture()">{$data.title_pic ? '更换' : '添加'}标题图</a></label>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    关键词:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <input type="text" class="input-text" value="{$data.keywords}" placeholder="关键词" id="source"
                        name="keywords">
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">内容简介:</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <textarea name="summary" id="summary" cols="" rows="" class="textarea"
                        placeholder="说点什么...最多输入500个字符" datatype="*10-100" dragonfly="true"
                        onKeyUp="textarealength(this,500)">{$data.summary}</textarea>
                    <p class="textarea-numberbar">
                        <em class="textarea-length">0</em>/500
                    </p>
                </div>
                <div class="col-3"> </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    文章正文：</label>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-1 col-sm-1"></label>
                <div class="formControls col-xs-11 col-sm-10">
                    <div id="editor">{$data.content|raw}</div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">
                    点击量：</label>
                <div class="formControls col-xs-8 col-sm-6">
                    <input type="number" class="input-text" value="{$data.clicks}" id="clicks" name="clicks"
                        style="width: 200px;">
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <button type="submit" class="btn btn-success radius" id="admin-powers-save"
                        name="">确&nbsp;定</button>
                    <button type="button" class="btn btn-default radius" onclick="window.history.back();"
                        style="margin-left:20px;">取&nbsp;消</button>
                </div>
            </div>
        </form>
    </article>
    <!-- 标题图上传 -->
    <div>
        <input type="file" hidden name="image" id="upload_picture">
    </div>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/plugins/ckeditor/ckeditor5/ckeditor.js"></script>
<script type="text/javascript">
    // 标题图上传
    const file = document.querySelector('#upload_picture');

    function uploadPicture() {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt, uploadfn());
    }

    function uploadfn() {
        file.oninput = function () {
            if (file.files && file.files[0]) {
                var formData = new FormData();
                formData.append("upload_file", file.files[0]);
                $.ajax({
                    url: '{:url("file_manager/uploadImage")}',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        var img = res.filename;
                        $("#view-img").attr('src', img);
                        $("#title_pic").val(img);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                        return false;
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    }
                });
            }
        }
    }
    // 标题图上传end

    $(function () {
        //实例化编辑器   
        ClassicEditor.create(document.querySelector('#editor'), {
            toolbar: {
                items: [
                    'sourceEditing', '|',
                    'bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
                    'heading', '|',
                    'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                    '-',
                    'alignment', 'outdent', 'indent', '|',
                    'undo', 'redo', '|',
                    'link', 'imageUpload', 'insertTable', '|',
                    'code', 'codeBlock', 'blockQuote', '|',
                    'findAndReplace', 'horizontalLine', 'numberedList', 'bulletedList',
                ],
                shouldNotGroupWhenFull: true
            },
            licenseKey: '',
            //图片上传
            simpleUpload: {
                // The URL the images are uploaded to.
                uploadUrl: '/admin/file_manager/ckeditorUploadImage'
            },
            //自定义字体
            fontFamily: {
                options: [
                    'default',
                    '微软雅黑,Microsoft YaHei',
                    '新宋体,NSimSun',
                    '楷体_GB2312,KaiTi_GB2312',
                    '黑体,SimHei',
                    '隶书,LiSu',
                    '幼园,YouYuan',
                    'Blackoak Std',
                    'Arial',
                    'Georgia',
                    'Tahoma',
                    'Trebuchet MS',
                    'verdana',
                ]
            },
            mediaEmbed: {   // 视频配置
                providers: [
                    {
                        name: 'myprovider',
                        url: [
                            /^ecpvscp.*\.com.*\/(\w+)/,
                            /^www\.ecpvscp.*/,
                            /^www\.bilibili.*/,
                            /(http|https):\/\/([\w.]+\/?)\S*/
                        ],
                        html: match => {
                            //获取媒体url
                            const input = match['input'];
                            return (
                                `<video src="${input}" controls="controls" style=" width: 100%;height: 100%; "></video>`
                            );
                        }
                    }
                ]
            }
        }).then(editor => {
            window.editor = editor;
        }).catch(error => {
            console.error('Oops, something went wrong!');
            console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
            console.warn('Build id: z4e2d8lqju9w-6lwv92tbu4hm');
            console.error(error);
        });
    })

    $("#form-admin-article").submit(function () {
        if (isNull($("#title").val())) {
            layer.msg('标题不可为空', {
                icon: 5,
                time: 1000
            });
            return false;
        }

        const content = window.editor.getData();

        if (isNull(content)) {
            layer.msg('文章内容不可为空', {
                icon: 5,
                time: 1000
            });
            return false;
        }

        $("<input/>").attr("type", "hidden").attr("name", "content").val(content).appendTo($("#form-admin-article"));

    })
</script>